<template>
  <div id="app">
    <table border="1px" width="800px">

        <thead>
        <tr>
          <th>编号</th>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
          <th>手机</th>
          <th>住址</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="student in students" :key="student.id">
          <td>{{ student.id }}</td>
          <td>{{ student.name }}</td>
          <td>{{ student.age }}</td>
          <td>{{ student.gender }}</td>
          <td>{{ student.cellphone }}</td>
          <td>{{ student.address }}</td>
        </tr>
        </tbody>
      </table>
  </div>
</template>
<script>

export default {
  name: "StudentView",
  data() {
    return {
      students: []
    }
  },
  methods: {
    loadStudents() {
      //使用axios请求后台
      this.$axios.get('/student/list')
          .then(result => {
            if (result.data.code === 200) {
              this.students = result.data.data;
            }
          })
    }
  },
  mounted() {
    this.loadStudents()
  }
}
</script>

<style scoped>

</style>